<template>
  <section class="app-scenes">
    <h3 class="app-title">应用场景</h3>
    <!--    <div class="scenes-tabs">-->
    <!--      <span v-for="(tab, i) in tabs" :key="i" :class="{ active: currentTab === i }" @click="currentTab = i">{{-->
    <!--        tab-->
    <!--      }}</span>-->
    <!--    </div>-->

    <!-- 标签切换（友福动态 / 媒体报道） -->
    <el-tabs v-model="activeTab" class="news-tabs">
      <el-tab-pane v-for="scene in scenes" :key="scene.name" :label="scene.title" :name="scene.name">
        <template #label>
          <p class="scene-label">{{ scene.title }}</p>
        </template>
        <div class="scenes-content">
          <!-- 文字描述区 -->
          <div class="scene-desc">
            <div class="speech-title">
              <img class="icon" src="https://images.health.ufutx.com/202506/18/2874b7295fd3fd2490838369b17affd3.png" />
              <p>{{ scene.title }}</p>
            </div>
            <ul class="speech-content">
              <li v-for="(line, i) in scene.content" :key="i">{{ line }}</li>
            </ul>
            <!--            <p class="speech-subtitle" v-html="scene.desc"></p>-->
          </div>
          <!-- 图片展示区 -->
          <div class="scene-img">
            <img :src="scene.image" :alt="scene.title" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 默认选中第一个场景
// const currentTab = ref(0)
// 结构化场景数据（单数据源管理）
const scenes = ref([
  {
    name: 'dynamic',
    title: '友福健康生态',
    content: [
      'AI精准个性化健康方案服务：透过友福七维AI健康修复系统分析多维度身心健康数据，量身打造专属的精准健康管理方案。',
      '智能穿戴设备数据监测：搭载AI模型算法的智能穿戴设备，医用级精度实时监测您的体温、睡眠、心率、血氧、血压等多项生理参数，时刻守护您的身心健康。'
    ],
    desc:
      'AI精准个性化健康方案服务：透过友福七维AI健康修复系统分析多维度身心健康数据，量身打造专属的精准健康管理方案。\n' +
      '智能穿戴设备数据监测：搭载AI模型算法的智能穿戴设备，医用级精度实时监测您的体温、睡眠、心率、血氧、血压等多项生理参数，时刻守护您的身心健康。',
    image: 'https://images.health.ufutx.com/202506/18/d2b5ca33bd970f64a6301fa75ae2eb22.png'
  },
  {
    name: 'report',
    title: '幸福婚恋',
    content: [
      '婚恋单身标签：透过清晰的“单身标签”功能，帮助您快速找到与您有共同话题和兴趣的潜在伴侣。',
      'AI婚恋算法配对服务：AI精准匹配个性与偏好，为您推荐最合适的灵魂伴侣，提供高效且真诚的交友体验。'
    ],
    desc:
      '婚恋单身标签：透过清晰的“单身标签”功能，帮助您快速找到与您有共同话题和兴趣的潜在伴侣。\n' +
      'AI婚恋算法配对服务：AI精准匹配个性与偏好，为您推荐最合适的灵魂伴侣，提供高效且真诚的交友体验。',
    image: 'https://images.health.ufutx.com/202506/23/b01c2ce25e34f80d499f0488d034b00b.png'
  },
  {
    name: 'growth',
    title: '个人成长',
    content: [
      '一分钟演讲成长记录：提供展现真实自我的平台，记录您每一次的表达与成长，分享您的精彩故事。\n' +
        '（每个模块对应相关的APP画面UI设计）'
    ],
    desc:
      '一分钟演讲成长记录：提供展现真实自我的平台，记录您每一次的表达与成长，分享您的精彩故事。\n' +
      '（每个模块对应相关的APP画面UI设计）',
    image: 'https://images.health.ufutx.com/202506/23/b07f55c7fd136392763729b9782f7776.png'
  }
])

const activeTab = ref(scenes.value[0].name)
</script>

<style scoped lang="less">
/* 标签切换样式（还原设计的蓝色下划线） */
.news-tabs {
  .py(50px);
  :deep(.el-tabs__nav-wrap) {
    //margin-bottom: 1.04167vw;
    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100vw;
      height: 0.5px;
      background-color: #b5b5b5;
      z-index: var(--el-index-normal);
    }
  }

  :deep(.el-tabs__active-bar) {
    background-color: @primary-dark; // 下划线颜色
    height: 3px;
    bottom: -10px !important;
    margin-top: 10px;
  }

  :deep(.el-tabs__header) {
    margin: 0;
    .el-tabs__nav {
      width: 100%;
      margin-bottom: 10px;
      display: flex;
      gap: 100px;
      .el-tabs__item {
        font-size: @font-size-lg;
        color: @text-color-secondary;

        &.is-active {
          color: @primary-dark; // 激活态文字颜色
        }
      }
    }
  }
}
.news-tabs {
  // 关键：让选项卡居中
  :deep(.el-tabs__header) {
    width: 100%; // 占满容器宽度，为居中提供基础
    .el-tabs__nav {
      justify-content: center; // 水平居中对齐
    }
  }
  @media (max-width: @tablet-breakpoint) {
    //flex-direction: column;
    .scene-label {
      font-size: @font-size-sm;
    }
    .speech-title {
      p {
        font-size: @font-size-sm;
      }
    }
    .speech-content li {
      font-size: 14px;
      color: @text-color-secondary;
      line-height: 25px;
      position: relative;
      padding-left: 12px;
      white-space: pre-wrap;
    }
    .scene-desc {
      text-align: center;
      padding: 0;
      margin-bottom: 20px;
    }
  }
}

.app-scenes {
  text-align: center;
  padding: 0 192px;
  .app-title {
    color: @text-color;
    font-size: 32px;
    font-weight: 600;
    line-height: 32px; /* 100% */
    letter-spacing: 0.32px;
    //.mb(50px);
  }
  .scenes-tabs {
    margin-bottom: 40px;

    span {
      margin: 0 20px;
      font-size: @font-size-md;
      color: @text-color-secondary;
      cursor: pointer;
      padding-bottom: 5px;
      border-bottom: 2px solid transparent;

      &.active {
        color: @primary-color;
        border-bottom: 2px solid @primary-color;
      }
    }
  }

  .scenes-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    position: relative;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 100%);
    //background: #00acc1;
    &:after {
      position: absolute;
      left: 500px;
      bottom: 7px;
      content: ' ';
      width: 360px;
      height: 360px;
      background-image: url('https://images.health.ufutx.com/202506/20/fc55ef830c38d03501fb37bc9f111b71.png');
      background-size: cover;
    }
    .scene-desc {
      width: 600px;
      text-align: left;
      //padding: 0 40px;
      .speech-title {
        color: @text-color;
        font-size: 18px;
        font-weight: 600;
        display: flex; // 启用 Flex 布局
        align-items: center; // 子元素垂直居中
        gap: 10px;
        .mb(20px);
        .icon {
          width: 18px;
          height: 18px;
          object-fit: contain;
        }
      }
      .speech-subtitle {
        color: @text-color;
        font-size: 14px;
        white-space: pre-wrap;
      }
    }

    .scene-img {
      text-align: center;
      width: 600px;
      img {
        width: 100%;
      }
    }
  }
}
.speech-content {
  list-style: none;
  padding: 0;
  font-size: 18px;
  li {
    font-size: 14px;
    color: @text-color-secondary;
    line-height: 25px;
    position: relative;
    padding-left: 12px;
    white-space: pre-wrap;
    &::before {
      // 还原设计图的·符号
      content: '·';
      font-size: 18px;
      position: absolute;
      left: 0;
    }
  }
}

/* ------------------- 移动端适配（max-width: 768px） ------------------- */
@media (max-width: 768px) {
  /* 页面整体适配 */
  .app-scenes {
    padding: 0 15px; /* 取消192px边距，改为小屏留白 */

    .app-title {
      font-size: 24px; /* 缩小标题字体 */
      line-height: 1.5;
      margin: 20px 0;
    }

    /* 场景内容区：垂直堆叠 */
    .scenes-content {
      flex-direction: column; /* 横向→垂直 */
      padding: 20px 10px;
      gap: 20px; /* 缩小间距 */

      /* 隐藏移动端不需要的装饰伪元素 */
      &:after {
        display: none !important;
      }

      /* 文字描述区：占满宽度 */
      .scene-desc {
        width: 100%; /* 取消600px固定宽度 */
        text-align: left;
        padding: 0 5px;

        .speech-title {
          font-size: 16px; /* 缩小标题 */
          margin-bottom: 15px;

          .icon {
            width: 16px;
            height: 16px;
          }
        }
      }

      /* 图片区：占满宽度+限制最大尺寸 */
      .scene-img {
        width: 100%; /* 取消600px固定宽度 */
        max-width: 400px; /* 避免大屏手机拉伸 */
        margin: 0 auto; /* 居中 */
      }
    }
  }

  /* 标签栏：解决溢出+优化交互 */
  .news-tabs {
    padding: 30px 0 20px;

    :deep(.el-tabs__header) {
      .el-tabs__nav {
        gap: 30px; /* 缩小标签间距，避免溢出 */
        overflow-x: auto; /* 允许横向滚动 */
        padding: 0 5px; /* 左右留白 */
        scrollbar-width: none; /* 隐藏火狐滚动条 */

        &::-webkit-scrollbar {
          /* 隐藏Chrome滚动条 */
          display: none;
        }

        .el-tabs__item {
          font-size: 14px; /* 缩小标签字体 */
          white-space: nowrap; /* 防止标签换行 */
          padding: 0 5px;
        }
      }
    }

    /* 调整下划线位置，避免错位 */
    :deep(.el-tabs__active-bar) {
      bottom: -8px !important;
      height: 2px; /* 缩小下划线 */
    }

    /* 自定义标签文本适配 */
    .scene-label {
      font-size: 14px;
    }
  }

  /* 列表样式：优化小屏阅读 */
  .speech-content li {
    line-height: 28px; /* 略微增加行高，提升可读性 */
    padding-left: 15px;

    &::before {
      font-size: 16px;
    }
  }
}
</style>
